<script setup lang="ts">
import { computed, ref, onMounted, reactive } from 'vue';
import Button from '../components/Button.vue';


// 表头
const headTableAtts = [
{ columnLabel: '姓名', columnName: 'name' },
{ columnLabel: '年龄', columnName: 'age' },
{ columnLabel: '性别', columnName: 'gender' },
{ columnLabel: '学校', columnName: 'school' },
{ columnLabel: '学历', columnName: 'qualification' },
{ columnLabel: '学生类型', columnName: 'type' }
];

// 表格数据
const originalDataList = [
{ name: '沈璃', age: 18, gender: '女', school: '双一流大学', qualification: '博士',type: '0' },
{ name: '行止', age: 18, gender: '男', school: '清华大学', qualification: '研究生' ,type: '1'},
{ name: '墨方', age: 19, gender: '男', school: '北京大学', qualification: '本科' },
{ name: '得帆', age: 18, gender: '男', school: '中原工学院', qualification: '本科' },
{ name: '小荷', age: 18, gender: '女', school: '苏州大学', qualification: '本科' },
{ name: '清夜', age: 19, gender: '男', school: '家里蹲大学', qualification: '初中' },
];
const dataList = ref([...originalDataList]);
/** ========================= 筛选条件 ========================= **/
const selectedAge = ref('');
const selectedGender = ref('');
const selectedSchool = ref('');
const selectedQualification = ref('');
const inputName = ref('');

// 筛选数据的方法
const filterData = () => {
  dataList.value = originalDataList.filter((row) => {
    return (
        (!inputName.value || row.name.includes(inputName.value)) && // 确保模糊搜索生效
        (!selectedAge.value || row.age === Number(selectedAge.value)) &&
        (!selectedGender.value || row.gender === selectedGender.value) &&
        (!selectedSchool.value || row.school === selectedSchool.value) &&
        (!selectedQualification.value || row.qualification === selectedQualification.value)
    );
  });
};
/** ========================= 清空筛选========================= **/
const resetFilters = () => {
  selectedAge.value = '';
  selectedGender.value = '';
  selectedSchool.value = '';
  selectedQualification.value = '';
  inputName.value = '';
  dataList.value = originalDataList;
};
/** ========================= 分页相关 ========================= **/
const currentPage = ref(1);
const pageSize = ref(3);

//计算应该显示的数据
const computedDataList = computed(() => {
  const start = (currentPage.value -1) * pageSize.value;
  const end  = start+ pageSize.value;
  return dataList.value.slice(start, end);
})
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  currentPage.value = 1;
};
/** =========================根据学历返回标签类型的方法 ========================= **/
const getTagType = (qualification: string): string => {
  switch (qualification) {
    case '博士':
      return 'success';
    case '研究生':
      return 'info';
    case '本科':
      return 'primary';
    case '初中':
      return 'warning';
    default:
      return 'default';
  }
};
</script>

<template>
  <!-- 筛选条件 -->
  <div style="margin-bottom: 10px;">
    <!-- 姓名输入框，用于模糊查询 -->
    <el-input
        v-model="inputName"
        placeholder="输入姓名进行模糊查询"
        style="margin-bottom: 10px; width: 200px;"
        @input="filterData"
    />

    <!-- 年龄筛选 -->
    <el-select v-model="selectedAge" clearable placeholder="选择年龄"  @change="filterData" style="margin-right: 10px; width: 120px;">
      <el-option label="18" value="18" />
      <el-option label="19" value="19" />
    </el-select>

    <!-- 性别筛选 -->
    <el-select v-model="selectedGender" clearable placeholder="选择性别" @change="filterData" style="margin-right: 10px; width: 120px;">
      <el-option label="男" value="男" />
      <el-option label="女" value="女" />
    </el-select>

    <!-- 学校筛选 -->
    <el-select v-model="selectedSchool" clearable @change="filterData" placeholder="选择学校" style="margin-right: 10px; width: 140px;">
      <el-option label="双一流大学" value="双一流大学" />
      <el-option label="清华大学" value="清华大学" />
      <el-option label="北京大学" value="北京大学" />
      <el-option label="中原工学院" value="中原工学院" />
      <el-option label="苏州大学" value="苏州大学" />
      <el-option label="家里蹲大学" value="家里蹲大学" />
    </el-select>

    <!-- 学历筛选 -->
    <el-select v-model="selectedQualification" @change="filterData" clearable placeholder="选择学历" style="margin-right: 10px; width: 120px;">
      <el-option label="博士" value="博士" />
      <el-option label="研究生" value="研究生" />
      <el-option label="本科" value="本科" />
      <el-option label="初中" value="初中" />
    </el-select>

    <!-- 搜索按钮 -->
    <!--      <el-button type="primary" @click="filterData">搜索</el-button>-->
    <Button @click="filterData">搜索</Button>
    <Button @click="resetFilters">清空</Button>
  </div>

  <!-- 表格 -->
  <el-table :data="computedDataList">
    <!-- 动态生成表格列 -->
    <el-table-column
        v-for="(item, index) in headTableAtts"
        :key="index"
        :label="item.columnLabel"
        :prop="item.columnName"
    >
      <!-- 自定义学历列显示内容 -->
      <template v-if="item.columnName === 'qualification'" v-slot="scope">
        <el-tag :type="getTagType(scope.row.qualification)">
          {{ scope.row.qualification }}
        </el-tag>
      </template>
      <!-- 其他列默认显示内容 -->
      <!--        <template v-else v-slot="scope">-->
      <!--          {{ scope.row[item.columnName] }}-->
      <!--        </template>-->
    </el-table-column>
  </el-table>

  <!-- 分页组件-->
  <el-pagination
      v-model:currentPage="currentPage"
      :page-size="pageSize"
      :page-sizes="[3, 5, 10]"
      :total="dataList.length"
      size="large"
      layout="total, sizes,prev, pager, next, jumper,"
      @size-change="handleSizeChange"
  />
  <!--分割线-->

</template>

